<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="70%" :before-close="clearForm">
      <!--内容区域 -->
      <el-form :model="studentForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-studentForm">
  <el-form-item label="学生学号" prop="stuid">
    <el-input v-model="studentForm.stuid"></el-input>
  </el-form-item>
  <el-form-item label="学生姓名" prop="stuname">
    <el-input v-model="studentForm.stuname"></el-input>
  </el-form-item>
  <el-form-item label="性别" prop="stusex">
    <el-input v-model="studentForm.stusex"></el-input>
  </el-form-item>
  <el-form-item label="班级" prop="stuclass">
    <el-input v-model="studentForm.stuclass"></el-input>
  </el-form-item>
  <el-form-item label="学生所属系" prop="stufactory" >
    <el-input v-model="studentForm.stufactory"></el-input>
  </el-form-item>
  <el-form-item label="联系方式" prop="stuphone" >
    <el-input v-model="studentForm.stuphone"></el-input>
  </el-form-item>


</el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearForm">取 消</el-button>
        <el-button type="primary" @click="submitForm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    // props:['dialogVisible'],
    props:{
        title:{
            type:String,
            default:'添加学生信息'
        },
        rowData:{
            type:Object,
            default:function(){
                return {}
            }
        }

    },
    data() {
        return {
        dialogVisible:false,
        studentForm: {
          stuid: '',
          stuname: '',
          stusex: '',
          stuclass: '',
          stufactory: '',
          stuphone: '',
        },
        rules: {
          stuid: [
            { required: true, message: '请输入课程名称', trigger: 'blur' }],
          stuname: [{ required: true, message: '请输入课程地点', trigger: 'blur' }],
          stusex: [{ required: true, message: '请输入课程时间', trigger: 'blur' }],
          stuclass: [{ required: false, message: '请选择课程学时', trigger: 'blur' }],
          stufactory: [{ required: false, message: '请选择课程类别', trigger: 'change' }],
          stuphone: [{ required: false, message: '请输入课程学分', trigger: 'change' }],
         
        },
    //   dialogVisible: true,
    }
  },
  methods: {
    //   自定义事件  修改dialogVisible
    close(){
        this.$emit('changeDialog')
      },
    submitForm() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            console.log("获取输入的信息",this.studentForm);
            let{stuid, stuname, stusex, stuclass, stufactory, stuphone} = this.studentForm;
            this.$api.AddStuinfo({
                stuid, stuname, stusex, stuclass, stufactory, stuphone
            })
            .then(res=>{
                console.log("添加的实现",res.data);
                if(res.data.status == 200){
                    this.$parent.http(1); // 添加后更新页面
                    this.$message({
                        message:'学生数据添加成功！',
                        type:'success'
                    });
                
                }else{
                    this.$message.error('错误');
                }
            })
            // this.clearForm();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    //   清空数据
    clearForm(formName) {
        this.dialogVisible = false;
        this.$refs.ruleForm.resetFields();
      }
  },
};
</script>

<style lang="less" scoped>
.line{
    text-align: center;
}
</style>